<!--application UI goes here-->

<div id= "personalInfo" data-role = "page" data-theme="d">

	<div data-role ="header" class ="blue" data-position="fixed" >
		<a id="account_button" href="#accountPanel" data-role="button" data-icon="bars" data-iconpos="notext" data-theme="b" data-inline="true">Account Menu</a>
		<h1>Projects </h1>
	</div>

	<div data-role="content" >

		<ul id="project_list" data-role="listview" data-filter="true" data-filter-placeholder="Search projects..." data-inset="true">
			<li class = "sample-project-item template" style ="display:none;">
				<a class="project-link" ></a>
			</li>
			<li class= "no-projects template" style="text-align:center;display:none;">
				No Projects
			</li>
		</ul>

	</div><!-- /content -->

	<div data-role ="footer" class="blue" data-position="fixed">
		<a href="#" data-role="button" class="refresh-button" data-icon="refresh" data-iconpos="notext" data-theme="c" data-inline="true">Refresh</a>

	</div>
	<div data-role="panel" data-position-fixed="true" data-theme="a" id="accountPanel" class="ui-responsive-panel">
		<ul data-role="listview" data-theme="a" class="account-panel">

			<li>
				<a href="#">Personal Info</a>
			</li>
			<li>
				<a href="#">Leaves</a>
			</li>
			<li>
				<a href="#" onClick="WL.Client.logout('CustomAuthenticatorRealm',{onSuccess: WL.Client.reloadApp})">Log out</a>
			</li>
			<li data-icon="delete">
				<a href="#" data-rel="close">Cancel</a>
			</li>
		</ul>
	</div>
	<script>
		/*$("#accountPanel").load("AccountPanel.html");
		 $.mobile.loadPage( "AccountPanel.html", true, {
		 type: "post",
		 data: $( "#accountPanel" ).serialize()
		 });*/
	</script>
</div>
